import { Grid, Header } from 'semantic-ui-react'
import React from 'react';
import ProgramItem from "./ProgramItem";
import Cookie from "react-cookies";

class ProgramDetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: Cookie.load("Token"),
            username: Cookie.load("Username"),
            pid: this.props.match.params.pid
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.match.params.pid !== this.state.pid) {
            this.setState({pid: this.props.match.params.pid})
        }
    }

    render() {
        const pi = ["open", "progressing", "closed", "rejected"].map((s, i) => <ProgramItem key={i} status={s} pid={this.state.pid}/>)
        return(
                <div id={"program-main"}>
                    <Header as="h2">
                        {this.state.pid}
                    </Header>
                    <Grid columns={4}>
                        {pi}
                    </Grid>
                </div>
            )
    }
}

export default ProgramDetail